<template>
  <div class="wifiPassword" @click.stop>
    <div class="block">
      <div class="title">
        输入Wi-Fi密码
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="password" type="password" name="密码" placeholder="请输入Wi-Fi密码"
            :rules="[{ required: true, message: '请输入Wi-Fi密码' }]" />
        </van-cell-group>
        <div class="button">
          <van-button block @click="emit('close')">
            取消
          </van-button>
          <van-button :disabled="password.length <= 0" block native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref,defineProps  } from 'vue';
import { showDialog } from 'vant';
import {connectWifi} from "@/api/index.js";
const password = ref('');
const {wifiItem}= defineProps(['wifiItem']) ;
const formData = ref({
  ssid: '',
  password: ''
})

const emit = defineEmits(['close']);
const onSubmit = () => {
  formData.value.ssid = wifiItem.bssid
  formData.value.password = password.value
  if(password.value.length < 8 ){
    showDialog({
      title: '密码小于8位请重新输入',
      message: '密码小于8位请重新输入',
    }).then(() => {
      //确认
      password.value = ""
    });
    return
  }
  const {data, code} = connectWifi({...formData.value})
    if (code == 200) {
      showDialog({
        title: 'Wi-Fi配置成功',
        message: 'Storage设备已成功使用此Wi-Fi联网',
      }).then(() => {
        //确认
      });
      emit('close');
    }else{
      showDialog({
        title: '密码错误,请重试',
        message: '密码错误,请重试',
      }).then(() => {
        //确认
        password.value = ""
      });
    }
}
</script>

<style lang="scss" scoped>
.wifiPassword {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 335px;
    height: 190px;
    background-color: #fff;
    border-radius: 16px;
    background: #FFF;
    padding: 32px 0;
    position: relative;
    overflow: hidden;

    .title {
      width: 100%;
      color: #000D3F;
      text-align: center;
      font-size: 15px;
    }

    .van-form {
      :deep(.van-field__body) {
        width: 271px;
        height: 44px;
        padding: 8px 12px;
        border-radius: 8px;
        background: rgba(86, 95, 127, 0.08);
      }

      .button {
        position: absolute;
        bottom: 0;
        display: flex;
        width: 100%;

        button {
          border-radius: 0;
          border-left: none;
          width: 50%;
          color: var(--van-primary-color);
        }
      }
    }
  }
}
</style>
